<template>
  <div class="resume" :style="{ width, height }">
    <div v-if="src" style="border: 1px solid #e8e8e8">
      <div class="btn" v-if="action.length > 0">
        <a-button icon="download" v-if="action.includes('download')" @click="onDownload" />
        <a-button icon="delete" v-if="action.includes('delete')" @click="onDelSrc" />
      </div>

      <img :src="`${src}?token=${$store.state.auth.token}`" v-if="fileType === 'img'" :width="width" :height="height" />
      <embed
        v-else-if="fileType === 'pdf'"
        :src="`${src}?token=${$store.state.auth.token}`"
        type="application/pdf"
        :width="width"
        :height="height"
      />
      <!-- <iframe
        v-else-if="fileType === 'pdf'"
        :src="`${src}?token=${$store.state.auth.token}`"
        :width="100"
        height="700px"
      /> -->
      <iframe
        v-else
        :src="`https://view.officeapps.live.com/op/view.aspx?src=${src}?token=${$store.state.auth.token}`"
        :width="width"
        :height="height"
        frameborder="1"
      ></iframe>
    </div>
    <!-- action="/file/api/v1/site/upload/inline" -->
    <div v-else>
      <a-upload
        v-if="upload"
        class="uploading"
        action="/recruit2/api/v1/talentPools/resumeTransformation"
        list-type="picture-card"
        name="file"
        accept=".doc,.docx,.pdf,.jpg,.jpeg,.png"
        :showUploadList="false"
        @change="handleChange"
        :beforeUpload="beforeUpload"
        :headers="headers"
        :style="{ width, height }"
      >
        <!-- .xls,.xlsx,.zip,.rar, -->
        <div class="pdfNull">
          <img :src="jl" class="pdfNullImg" />
          <div>
            该人才暂无附件简历
            <a-button type="link"> 立即上传 </a-button>
          </div>
          <div>支持格式：PDF、DOC、DOCX、PNG、JPG、JPEG</div>
        </div>
      </a-upload>
      <div class="pdfNull" :style="{ width, height }" v-else>
        <img :src="jl" class="pdfNullImg" />
        <div>该人才暂无附件简历</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "xqjr-module-auth";
import { onGetDownload } from "./api";
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "700px"
    },
    src: {
      type: String,
      default: ""
    },
    upload: {
      type: Boolean,
      default: true
    },
    action: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    src: {
      handler(v) {
        const regImg = /\.(?:png|jpg|jpeg)$/i;
        const regPdf = /\.(?:pdf)$/i;
        if (typeof v === "string") {
          if (v.match(regImg)) {
            this.fileType = "img";
          }
          if (v.match(regPdf)) {
            this.fileType = "pdf";
          }
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      fileType: "file",
      jl: require("@/assets/recruitment/jl.png"),
      headers: {}
    };
  },
  created() {
    this.headers = {
      token: getToken()
    };
  },
  methods: {
    onDelSrc() {
      this.$confirm({
        okText: "确定",
        title: `确定要删除简历？`,
        onOk: () => {
          this.$emit("upData", "");
        }
      });
    },
    beforeUpload(file) {
      const v = this.getFileSize(file.size);
      if (v.unit === "MB" || v.unit === "KB" || v.unit === "B") {
        if (v.unit === "MB" && parseFloat(v.num) > 5) {
          this.$notification.error({ message: "文件大小不能超过5M" });
          return false;
        }
      } else {
        this.$notification.error({ message: "文件大小不能超过5M" });
        return false;
      }
    },
    getFileSize(size) {
      function bytesToSize(bytes) {
        if (bytes === 0) return "0 B";
        const k = 1024;
        const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return {
          num: (bytes / Math.pow(k, i)).toPrecision(4),
          unit: sizes[i]
        };
      }
      return bytesToSize(parseInt(size));
    },
    handleChange({ file, fileList }) {
      if (file.status === "done" || file.status === "removed") {
        if (file.response.code === 200) {
          this.$emit("upData", file.response.data);
          if (file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg") {
            this.fileType = "img";
          } else if (file.type === "application/pdf") {
            this.fileType = "pdf";
          } else {
            this.fileType = "file";
          }
        }
      }
    },
    onDownload() {
      this.$notification.warning({ message: "正在下载简历" });
      onGetDownload(this.src, "简历");
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .uploading .ant-upload-select-picture-card {
  width: 100%;
  height: 100%;
}

.resume {
  position: relative;
  .btn {
    width: 90px;
    height: 38px;
    position: absolute;
    top: 24px;
    right: 24px;
    button {
      width: 32px;
      height: 32px;
      color: #b2b2b2;
      margin-left: 12px;
    }
  }
  .pdfNull {
    width: 100%;
    height: 100%;
    background: #f4f6fa;
    border-radius: 4px;
    text-align: center;
    padding-top: 100px;
    .pdfNullImg {
      width: 64px;
      height: 76px;
      margin-bottom: 22px;
    }
  }
}
</style>
